
import React from "react";
import {Button, Form, Icon, message, Modal, Upload} from "antd";
import {diffProps} from "../../libs/funcs";

/**
 * 输入框
 */
class FormShowPic extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            disabled: false,
            data:{},
            chunkSize:1024 * 1024 * 5, //切片的大小
            currentTrunk:0, //当前上传分片的索引
            percent:0,
            fileList: this.handleInitialValue(),
            is_show_process:false,
            previewVisible:false,
            previewImage: '',
        };
    }

    handlePreview = async file => {
        if (!file.thumbUrl){
            message.warning("该文件不支持预览")
        }else {
            if (!file.url && !file.preview) {
                file.preview = await this.getBase64(file.originFileObj);
            }
            this.setState({
                previewImage: file.url || file.preview,
                previewVisible: true,
            });
        }
    };

    handleInitialValue = () => {
        try {
            if (Array.isArray(this.props.initialValue) && this.props.initialValue.length > 0 && this.props.initialValue[0].hasOwnProperty("url")){
                return this.props.initialValue;
            }

            return [];
        }catch (e) {
            return [];
        }
    };

    handleCancel = () => this.setState({ previewVisible: false });

    render() {
        const {getFieldDecorator} =  this.props.form;
        const {initialValue,label,field,rules,allowClear,placeholder,disabled,addonAfter,addonBefore} = this.props;
        const new_props = diffProps(this.props,["form","initialValue","label","field","rules","allowClear","placeholder"]);

        return (
            <Form.Item label={label ? label : "输入框"} {...new_props}>
                <Upload
                    listType={'picture'}
                    fileList={this.state.fileList}
                    onPreview={this.handlePreview}
                    showUploadList={{ showDownloadIcon: false, showRemoveIcon: false }}
                >
                </Upload>
                <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
                </Modal>
            </Form.Item>
        );
    }
}

export default FormShowPic;
